<script lang="ts">
    import {bem} from "@/common/util";
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";
    import URadio from "@/uni_modules/u-radio/components/u-radio/u-radio.vue";

    export default {
        name: "u-radio-group",
        // 组件
        components: {URadio},
        // 混合
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: ["change", "update:value", "onload"],
        // 数据
        data()
        {
            return {
                selected: [] as (string | number)[]
            };
        },
        // 监听器
        watch: {
            // 监听单选组的值
            value(value: string | number): void
            {
                this.selected = [value];
            }
        },
        // 页面挂载
        mounted()
        {
            // 组件挂载完成
            this.$nextTick(() =>
            {
                // 获取当前单选框的值
                this.selected = [this.value];

                // 判断是否触发change事件
                if (this.trigger)
                {
                    // 触发自定义change事件
                    this.$emit("change", this.value);
                }

                // 触发onload事件
                this.$emit("onload", this.value);
            });
        },
        // 计算函数
        computed: {
            // 生成bem风格的类名
            bemClass(): string
            {
                return bem("radio-group", [
                    this.placement,
                    this.contentAlign
                ]);
            }
        },
        // 方法
        methods: {
            // 改变事件
            changeHandler(argumentsList: Record<string, any>): void
            {
                const {data, checked} = argumentsList || {};

                if (checked)
                {
                    if (this.selected.length)
                    {
                        // 删除数组中的第一个元素
                        this.selected.splice(0, 1);
                    }

                    // 添加数组
                    this.selected.push(data[this.valueTag]);
                }

                // 触发双向绑定事件
                this.$emit("update:value", data[this.valueTag]);

                // 触发change事件
                this.$emit("change", data[this.valueTag]);
            }
        }
    };
</script>

<template>
    <!-- 单选框组件 -->
    <view
        :class="[
            bemClass,
            customClass
        ]"
        :style="[
            customStyle,
            [padding && padding.length ? `--custom-radio-group-padding-top: ${$u.unit(padding[0])}` : ''],
            [padding && padding.length ? `--custom-radio-group-padding-right: ${$u.unit(padding[1])}` : ''],
            [padding && padding.length ? `--custom-radio-group-padding-bottom: ${$u.unit(padding[2])}` : ''],
            [padding && padding.length ? `--custom-radio-group-padding-left: ${$u.unit(padding[3])}` : ''],
        ]"
    >
        <!-- 遍历 -->
        <view
            v-for="(item, index) in options"
            :key="index"
            class="u-radio-group-wrapper"
        >
            <u-radio
                :checked="selected.includes(item[valueTag])"
                :disabled="item.disabled"
                :label="item[nameTag]"
                :name="item[valueTag].toString()"
                v-bind="$attrs"
                @change="(status: boolean) => {changeHandler({checked: status, data: item, index: index})}"
            />
        </view>
        <!-- //遍历 -->
    </view>
    <!-- //单选框组件 -->
</template>

<style lang="scss" scoped>
    .u-radio-group
    {
        // 横向布局
        &-horizontal
        {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: var(--custom-radio-group-justify-content);

            .u-radio-group-wrapper
            {
                padding: var(--custom-radio-group-padding-top) var(--custom-radio-group-padding-right) var(--custom-radio-group-padding-bottom) var(--custom-radio-group-padding-left);
            }
        }

        // 纵向布局
        &-vertical
        {
            display: flex;
            flex-direction: column;
        }

        // 左对齐
        &.u-radio-group-left
        {
            justify-content: flex-start;
        }

        // 右对齐
        &.u-radio-group-right
        {
            justify-content: flex-end;
        }
    }
</style>